﻿@page "/dock-view/visible"
@inherits BaseDockView

<h4 class="mt-3">可隐藏的面板</h4>
<p>通过设置 <code>DockComponent</code> 的属性 <code>Visible</code> 控制面板的显示和隐藏</p>

<Button OnClick="OnToggleVisible" Text="切换标签一"></Button>

<div class="dock-toggle-demo">
    <DockView Name="DockViewVisible" EnableLocalStorage="false" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync">
        <DockContent Type="DockContentType.Column">
            <DockComponent Title="标签一" Visible="Visible">
                <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
                       IsStriped="true" IsBordered="true" IsExcel="true" ShowRefresh="false"
                       ShowDefaultButtons="false">
                    <DetailRowTemplate>
                        @{
                            var detailContext = GetDetailDataTableDynamicContext(context);
                        }
                        <div class="p-2 w-100">
                            <Table TItem="DynamicObject" DynamicContext="detailContext" IsStriped="true" IsBordered="true" IsExcel="true">
                            </Table>
                        </div>
                    </DetailRowTemplate>
                </Table>
            </DockComponent>
            <DockComponent Title="标签二" ShowClose="false">
                <Table TItem="Foo" @bind-Items="Items"
                       IsStriped="true" IsBordered="true" IsMultipleSelect="true"
                       ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
                       OnAddAsync="@OnAddAsync">
                    <TableColumns>
                        <TableColumn @bind-Field="@context.DateTime" Width="180" />
                        <TableColumn @bind-Field="@context.Name" />
                        <TableColumn @bind-Field="@context.Address" Width="180" TextEllipsis="true" ShowTips="true" />
                        <TableColumn @bind-Field="@context.Education" />
                        <TableColumn @bind-Field="@context.Count" />
                        <TableColumn @bind-Field="@context.Complete" />
                    </TableColumns>
                </Table>
            </DockComponent>
            <DockComponent Title="标签三" ShowClose="false">
                <FetchData></FetchData>
            </DockComponent>
        </DockContent>
    </DockView>
</div>

@code {
    private bool Visible { get; set; } = true;

    private void OnToggleVisible()
    {
        Visible = !Visible;
    }

    private Task OnVisibleStateChangedAsync(string title, bool visible)
    {
        if (title == "标签一")
        {
            Visible = visible;
        }
        return Task.CompletedTask;
    }
}
